import React, { useEffect, useState } from 'react'
import { View, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getDom } from '@/utils/utils'
import City from '@/common/city'
import { toast } from '@/utils/utils'
import './index.scss'
const SelectAddress = (props) => {
    const { visible, onChange, onClose, defaultData = {} } = props
    const { cityCodes = [] } = defaultData
    const [activeList, setActiveList] = useState([])
    const [data, setData] = useState([])
    const [active, setActive] = useState(null)
    useEffect(() => {
        if (visible) {
            setActive(City[0].value)
            setActiveList(City[0].children)
            setData(cityCodes)
        }
        else {
            setActive(null)
            setActiveList([])
            setData([])
        }
    }, [visible])
    const isSelect = (val) => {
        const flag = data.reduce((item, index) => {
            if (item) {
                return item
            }
            else {
                const { value } = index
                if (value === val) {
                    return true
                } else {
                    return false
                }
            }

        }, false)
        return flag
    }
    const RenderAllView = () => {
        const list = City.reduce((item, index) => {
            if (index.value === active) {

                return index.children
            }
            else {
                return item
            }
        }, [])
        const selectAllList = data.filter(val => {
            return val.pid === active
        })
        console.log(selectAllList, list, 'selectList')
        if (list.length === selectAllList.length) {
            return <View onClick={() => {
                setData(data.filter(o => {
                    return o.pid !== active
                }))
            }} className='SelectAddress_select_rightItem SelectAddress_select_rightItemCheck'>
                <View>全部</View>
                <View className='SelectAddress_select_select'></View>
            </View>
        } else {
            return <View onClick={() => {
                setData([...list, ...data.filter(val => { return val.pid !== active })])
            }} className='SelectAddress_select_rightItem'>
                <View>全部</View>
                <View className='SelectAddress_select_noSelect'></View>
            </View>

        }
    }
    return <View className='SelectAddress_box'>
        <View className='SelectAddress_body_info'>
            <View className='SelectAddress_body_left'>
                {City.map(val => {
                    const { value, label, children } = val
                    return <View onClick={() => {
                        setActive(value)
                        setActiveList(children)
                    }} className={value === active ? 'SelectAddress_select_item SelectAddress_select_itemCheck' : 'SelectAddress_select_item'}>{label}</View>
                })}

            </View>
            <View className='SelectAddress_body_right'>
                {RenderAllView()}
                {activeList.map(val => {
                    const { value, label } = val
                    if (!isSelect(value)) {
                        return <View onClick={() => {
                            setData([...data, val])
                        }} className='SelectAddress_select_rightItem'>
                            <View>{label}</View>
                            <View className='SelectAddress_select_noSelect'></View>
                        </View>
                    }
                    return <View onClick={() => {
                        setData(data.filter(o => {
                            return o.value !== value
                        }))
                    }} className='SelectAddress_select_rightItem SelectAddress_select_rightItemCheck'>
                        <View>{label}</View>
                        <View className='SelectAddress_select_select'></View>
                    </View>
                })}
            </View>
        </View>
        {data.length > 0 && <View className='SelectAddress_selectTag'>
            {data.map(val => {
                return <View className='SelectAddress_tag'>
                    {val.label}
                    <View onClick={() => {
                        setData(data.filter(o => { return o.value !== val.value }))
                    }} className='SelectAddress_tag_close'></View>
                </View>
            })}
        </View>}
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData([])
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        schoolProvinceCode: active,
                        cityCodes: data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const Sort = (props) => {
    const { selectList = [], onChange, onClose, defaultData = {}, visible } = props
    const [list, setList] = useState([])
    const { sortField = 'id', sortValue = 'asc' } = defaultData
    useEffect(() => {
        const sortList = selectList.reduce((val, item) => {
            if (item.code === 'sort') {
                return item.sortList
            }
            else {
                return val
            }
        }, [])
        setList(sortList)
    }, [selectList])
    return <View className='Sort_Box'>
        {list.map(val => {
            return <View onClick={() => {
                onChange({
                    sortField: val.sortField,
                    sortValue: val.sortValue
                })
                onClose()
            }} className={`Sort_List ${defaultData.sortField === val.sortField && defaultData.sortValue === val.sortValue ? 'Sort_List_itemCheck' : ''}`}>
                <View>
                    {val.sortName}
                </View>
            </View>
        })}
    </View>
}
const FilterData = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState({})
    const [RenderData, setRenderData] = useState({})
    useEffect(() => {
        const filterObj = selectList.reduce((val, item) => {
            if (item.code === 'filter') {
                return item.filter
            }
            else {
                return val
            }
        }, {})
        setRenderData(filterObj)
    }, [selectList])
    useEffect(() => {
        const { schoolLevel = '', schoolNature = '', schoolLabel = '', schoolSourceId = '', schoolType = '' } = defaultData
        if (visible) {
            setData({ schoolLevel, schoolNature, schoolLabel, schoolSourceId, schoolType })
        }
        else {
            setData({})
        }
    }, [visible])
    const {
        schoolLevel = '',
        schoolNature = '',
        schoolLabel = '',
        schoolSourceId = '',
        schoolType = ''
    } = data
    const {
        schoolLabelList = [],
        schoolLevelList = [],
        schoolNatureList = [],
        schoolSourceList = [],
        schoolTypeList = [],
    } = RenderData
    return <View className='FilterData_box'>
        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                <View className='FilterData_content_title'>办学层次</View>
                <View className='FilterData_content_item'>
                    {schoolLevelList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolLevel) {
                                setData({
                                    ...data,
                                    schoolLevel: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolLevel: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolLevel ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>办学性质</View>

                <View className='FilterData_content_item'>
                    {schoolNatureList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolNature) {
                                setData({
                                    ...data,
                                    schoolNature: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolNature: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolNature ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>

                <View className='FilterData_content_title'>院校标签</View>
                <View className='FilterData_content_item'>
                    {schoolLabelList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolLabel) {
                                setData({
                                    ...data,
                                    schoolLabel: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolLabel: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolLabel ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>院校水平</View>
                <View className='FilterData_content_item'>
                    {schoolSourceList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolSourceId) {
                                setData({
                                    ...data,
                                    schoolSourceId: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolSourceId: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolSourceId ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>院校类型</View>
                <View className='FilterData_content_item'>
                    {schoolTypeList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolType) {
                                setData({
                                    ...data,
                                    schoolType: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolType: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolType ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData({
                        schoolType: '',
                        schoolSourceId: '',
                        schoolLabel: '',
                        schoolNature: '',
                        schoolLevel: ''

                    })
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        ...data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const PlanSchoolFilterData = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState({})
    const [RenderData, setRenderData] = useState({})
    useEffect(() => {
        const filterObj = selectList.reduce((val, item) => {
            if (item.code === 'planSchoolFilter') {
                return item.planSchoolFilter
            }
            else {
                return val
            }
        }, {})
        setRenderData(filterObj)
    }, [selectList])
    console.log(RenderData, 'RenderData')
    useEffect(() => {
        const { schoolLevel = '', schoolNature = '', schoolLabel = '', schoolSourceId = '', schoolType = '', optionalRequireRecleans = [] } = defaultData
        if (visible) {
            setData({ ...defaultData, schoolLevel, schoolNature, schoolLabel, schoolSourceId, schoolType, optionalRequireRecleans })
        }
        else {
            setData({})
        }
    }, [visible])
    const {
        optionalRequireRecleans = [],
        sortField = '',
        sortValue = '',
        studentsNumberTotalStart,
        studentsNumberTotalEnd,
        lowestScoreStart,
        lowestScoreEnd,
        lowestPlaceStart,
        lowestPlaceEnd
    } = data
    const {
        sortList = [],
        subjectRecleanList = [],
    } = RenderData
    const filterIncludes = (id) => {
        return optionalRequireRecleans.includes(id)
    }
    const SubjectHandle = (value) => {
        if (filterIncludes(value)) {
            setData({
                ...data,
                optionalRequireRecleans: optionalRequireRecleans.filter(val => {
                    return val !== value
                })
            })
        }
        else {
            if (optionalRequireRecleans.length >= 3) {
                toast('科目最多可选3个')
            } else {
                setData({
                    ...data,
                    optionalRequireRecleans: [...optionalRequireRecleans, value]
                })
            }
        }
    }
    return <View className='FilterData_box'>

        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                {subjectRecleanList && subjectRecleanList.length > 0 ? <>
                    <View className='FilterData_content_title'>选科</View>
                    <View className='FilterData_content_item'>
                        {subjectRecleanList.map(val => {
                            const { name, value } = val
                            return <View onClick={() => {
                                SubjectHandle(value)
                            }} className={`FilterData_content_tag ${filterIncludes(value) ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                        })}
                    </View>
                </> : ''}
                {sortList && sortList.length > 0 ?
                    <>
                        <View className='FilterData_content_title'>排序</View>

                        <View className='FilterData_content_item'>
                            {sortList.map(val => {
                                const { sortName, } = val
                                return <View onClick={() => {
                                    if (val.sortField === sortField && val.sortValue === sortValue) {
                                        return
                                    }
                                    else {
                                        setData({
                                            ...data,
                                            sortField: val.sortField,
                                            sortValue: val.sortValue

                                        })
                                    }
                                }} className={`FilterData_content_tag ${val.sortValue === sortValue && val.sortField === sortField ? 'FilterData_content_tagCheck' : ''}`}>{sortName}</View>
                            })}
                        </View>
                    </> : ''}
                <View className='FilterData_content_title'>招生人数</View>
                <View className='FilterData_content_InputBox'>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            studentsNumberTotalStart: e.target.value
                        })
                    }} value={studentsNumberTotalStart} placeholderClass='FilterData_content_Inputdega' placeholder='最低人数' className='FilterData_content_Input'></Input>
                    <View className=''>至</View>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            studentsNumberTotalEnd: e.target.value
                        })
                    }} value={studentsNumberTotalEnd} placeholderClass='FilterData_content_Inputdega' placeholder='最高人数' className='FilterData_content_Input'></Input>
                </View>
                <View className='FilterData_content_title'>最低分数</View>
                <View className='FilterData_content_InputBox'>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestScoreStart: e.target.value
                        })
                    }} value={lowestScoreStart} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                    <View className=''>至</View>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestScoreEnd: e.target.value
                        })
                    }} value={lowestScoreEnd} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                </View>
                <View className='FilterData_content_title'>位次区间</View>
                <View className='FilterData_content_InputBox'>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestPlaceStart: e.target.value
                        })
                    }} value={lowestPlaceStart} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                    <View className=''>至</View>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestPlaceEnd: e.target.value
                        })
                    }} value={lowestPlaceEnd} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                </View>
            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData({
                        optionalRequireRecleans: [],
                        studentsNumberTotalStart: '',
                        studentsNumberTotalEnd: '',
                        lowestScoreStart: '',
                        lowestScoreEnd: '',
                        lowestPlaceStart: '',
                        lowestPlaceEnd: '',
                    })
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        ...data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View >
}
const VolunteerFilter = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState({})
    const [RenderData, setRenderData] = useState({})
    useEffect(() => {
        const filterObj = selectList.reduce((val, item) => {
            if (item.code === 'volunteerFilter') {
                return item.filter
            }
            else {
                return val
            }
        }, {})
        setRenderData(filterObj)
    }, [selectList])
    console.log(RenderData, 'RenderData')
    useEffect(() => {
        const { schoolLevel = '', schoolNature = '', schoolLabel = '', schoolSourceId = '', schoolType = '', optionalRequireRecleans = [] } = defaultData
        if (visible) {
            setData({ ...defaultData, schoolLevel, schoolNature, schoolLabel, schoolSourceId, schoolType, optionalRequireRecleans })
        }
        else {
            setData({})
        }
    }, [visible])
    const {

        schoolLevel = '',
        schoolNature = '',
        schoolLabel = '',
        schoolSourceId = '',
        schoolType = '',
        lowestScoreStart,
        lowestScoreEnd,
        lowestPlaceStart,
        lowestPlaceEnd
    } = data
    const {
        schoolLabelList = [],
        schoolLevelList = [],
        schoolNatureList = [],
        schoolSourceList = [],
        schoolTypeList = [],
        rangeList = []
    } = RenderData
    return <View className='FilterData_box'>

        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                {rangeList.length > 0 ? <>
                    <View className='FilterData_content_title'>位次区间</View>
                    <View className='FilterData_content_InputBox'>
                        <Input onInput={(e) => {
                            setData({
                                ...data,
                                lowestPlaceStart: e.target.value
                            })
                        }} value={lowestPlaceStart} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                        <View className=''>至</View>
                        <Input onInput={(e) => {
                            setData({
                                ...data,
                                lowestPlaceEnd: e.target.value
                            })
                        }} value={lowestPlaceEnd} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                    </View>
                </> : null}
                <View className='FilterData_content_title'>办学层次</View>
                <View className='FilterData_content_item'>
                    {schoolLevelList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolLevel) {
                                setData({
                                    ...data,
                                    schoolLevel: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolLevel: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolLevel ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>办学性质</View>

                <View className='FilterData_content_item'>
                    {schoolNatureList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolNature) {
                                setData({
                                    ...data,
                                    schoolNature: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolNature: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolNature ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>

                <View className='FilterData_content_title'>院校标签</View>
                <View className='FilterData_content_item'>
                    {schoolLabelList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolLabel) {
                                setData({
                                    ...data,
                                    schoolLabel: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolLabel: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolLabel ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>院校水平</View>
                <View className='FilterData_content_item'>
                    {schoolSourceList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolSourceId) {
                                setData({
                                    ...data,
                                    schoolSourceId: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolSourceId: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolSourceId ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>院校类型</View>
                <View className='FilterData_content_item'>
                    {schoolTypeList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolType) {
                                setData({
                                    ...data,
                                    schoolType: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolType: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolType ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>

            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData({
                        schoolType: '',
                        schoolSourceId: '',
                        schoolLabel: '',
                        schoolNature: '',
                        schoolLevel: '',
                        lowestPlaceStart: '',
                        lowestPlaceEnd: '',
                    })
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        ...data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View >
}
const PlanMajorFilter = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState({})
    const [RenderData, setRenderData] = useState({})
    useEffect(() => {
        const filterObj = selectList.reduce((val, item) => {
            if (item.code === 'planMajorFilter') {
                return item.filter
            }
            else {
                return val
            }
        }, {})
        setRenderData(filterObj)
    }, [selectList])
    useEffect(() => {
        const { schoolLevel = '', schoolNature = '', schoolLabel = '', schoolSourceId = '', schoolType = '' } = defaultData
        if (visible) {
            setData({ ...defaultData, schoolLevel, schoolNature, schoolLabel, schoolSourceId, schoolType })
        }
        else {
            setData({})
        }
    }, [visible])

    const {
        schoolLevel = '',
        schoolNature = '',
        schoolLabel = '',
        schoolSourceId = '',
        schoolType = '',
        studentsNumberTotalStart,
        studentsNumberTotalEnd,
        lowestScoreStart,
        lowestScoreEnd,
        lowestPlaceStart,
        lowestPlaceEnd
    } = data
    const {
        schoolLabelList = [],
        schoolLevelList = [],
        schoolNatureList = [],
        schoolSourceList = [],
        schoolTypeList = [],
    } = RenderData
    return <View className='FilterData_box'>
        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                <View className='FilterData_content_title'>办学层次</View>
                <View className='FilterData_content_item'>
                    {schoolLevelList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolLevel) {
                                setData({
                                    ...data,
                                    schoolLevel: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolLevel: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolLevel ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>办学性质</View>

                <View className='FilterData_content_item'>
                    {schoolNatureList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolNature) {
                                setData({
                                    ...data,
                                    schoolNature: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolNature: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolNature ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>

                <View className='FilterData_content_title'>院校标签</View>
                <View className='FilterData_content_item'>
                    {schoolLabelList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolLabel) {
                                setData({
                                    ...data,
                                    schoolLabel: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolLabel: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolLabel ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>院校水平</View>
                <View className='FilterData_content_item'>
                    {schoolSourceList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolSourceId) {
                                setData({
                                    ...data,
                                    schoolSourceId: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolSourceId: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolSourceId ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>院校类型</View>
                <View className='FilterData_content_item'>
                    {schoolTypeList.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === schoolType) {
                                setData({
                                    ...data,
                                    schoolType: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolType: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolType ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
                <View className='FilterData_content_title'>招生人数</View>
                <View className='FilterData_content_InputBox'>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            studentsNumberTotalStart: e.target.value
                        })
                    }} value={studentsNumberTotalStart} placeholderClass='FilterData_content_Inputdega' placeholder='最低人数' className='FilterData_content_Input'></Input>
                    <View className=''>至</View>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            studentsNumberTotalEnd: e.target.value
                        })
                    }} value={studentsNumberTotalEnd} placeholderClass='FilterData_content_Inputdega' placeholder='最高人数' className='FilterData_content_Input'></Input>
                </View>
                <View className='FilterData_content_title'>最低分数</View>
                <View className='FilterData_content_InputBox'>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestScoreStart: e.target.value
                        })
                    }} value={lowestScoreStart} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                    <View className=''>至</View>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestScoreEnd: e.target.value
                        })
                    }} value={lowestScoreEnd} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                </View>
                <View className='FilterData_content_title'>位次区间</View>
                <View className='FilterData_content_InputBox'>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestPlaceStart: e.target.value
                        })
                    }} value={lowestPlaceStart} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                    <View className=''>至</View>
                    <Input onInput={(e) => {
                        setData({
                            ...data,
                            lowestPlaceEnd: e.target.value
                        })
                    }} value={lowestPlaceEnd} placeholderClass='FilterData_content_Inputdega' placeholder='请输入' className='FilterData_content_Input'></Input>
                </View>
            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData({
                        schoolType: '',
                        schoolSourceId: '',
                        schoolLabel: '',
                        schoolNature: '',
                        schoolLevel: '',
                        studentsNumberTotalStart: '',
                        studentsNumberTotalEnd: '',
                        lowestScoreStart: '',
                        lowestScoreEnd: '',
                        lowestPlaceStart: '',
                        lowestPlaceEnd: '',
                    })
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        ...data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const SchoolLevel = (props) => {
    const { selectList = [], onChange, onClose, defaultData = {}, visible } = props
    const [list, setList] = useState([])
    const { } = defaultData
    useEffect(() => {
        const sortList = selectList.reduce((val, item) => {
            if (item.code === 'schoolLevel') {
                return item.schoolLevelList
            }
            else {
                return val
            }
        }, [])
        setList(sortList)
    }, [selectList])
    return <View className='Sort_Box'>
        {list.map(val => {
            return <View onClick={() => {
                onChange({
                    schoolLevel: val.value
                })
                onClose()
            }} className={`Sort_List ${defaultData.schoolLevel === val.value ? 'Sort_List_itemCheck' : ''}`}>
                <View>
                    {val.name}
                </View>
            </View>
        })}
    </View>
}
const EnrollYear = (props) => {
    const { selectList = [], onChange, onClose, defaultData = {}, visible } = props
    const [list, setList] = useState([])
    const { } = defaultData
    useEffect(() => {
        const sortList = selectList.reduce((val, item) => {
            if (item.code === 'enrollYear') {
                return item.enrollYearList
            }
            else {
                return val
            }
        }, [])
        setList(sortList)
    }, [selectList])
    return <View className='Sort_Box'>
        {list.map(val => {
            return <View onClick={() => {
                onChange({
                    year: val.yearName
                })
                onClose()
            }} className={`Sort_List ${defaultData.year === val.yearName ? 'Sort_List_itemCheck' : ''}`}>
                <View>
                    {val.yearName}
                </View>
            </View>
        })}
    </View>
}
const MajorType = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [], } = props
    const { majorIds = [] } = defaultData
    const [list, setList] = useState([])
    const [data, setData] = useState([])
    const [activeList, setActiveList] = useState([])
    const [active, setActive] = useState(null)
    useEffect(() => {
        if (visible) {
            setData(majorIds)
        }
        else {
            setActive(null)
            setData([])
        }
    }, [visible, list])

    useEffect(() => {
        const majorTypeList = selectList.reduce((val, item) => {
            if (item.code === 'major') {
                return item.majorTypeList
            }
            else {
                return val
            }
        }, [])
        if (majorTypeList.length > 0) {
            setActive(majorTypeList[0].id)
            setActiveList(majorTypeList[0].majorTypeList)
        }
        setList(majorTypeList)
    }, [selectList])
    const isSelect = (val) => {
        const flag = data.reduce((item, index) => {
            if (item) {
                return item
            }
            else {
                const { id } = index
                if (id === val) {
                    return true
                } else {
                    return false
                }
            }

        }, false)
        return flag
    }
    return <View className='SelectAddress_box'>
        <View className='SelectAddress_body_info'>
            <View className='SelectAddress_body_left'>
                {list.map(val => {
                    const { id, majorTypeName, majorTypeList = [] } = val
                    return <View onClick={() => {
                        setActive(id)
                        setActiveList(majorTypeList)
                    }} className={id === active ? 'SelectAddress_select_item SelectAddress_select_itemCheck' : 'SelectAddress_select_item'}>{majorTypeName}</View>
                })}

            </View>
            <View className='SelectAddress_body_right'>
                {activeList.map(c => {
                    const { majorList = [] } = c
                    return <>
                        <View className='SelectAddress_select_rightTitle'>{c.majorTypeName}</View>
                        {majorList.map(val => {
                            const { id, majorName, } = val
                            if (!isSelect(id)) {
                                return <View onClick={() => {
                                    setData([...data, val])
                                }} className='SelectAddress_select_rightItem'>
                                    <View>{majorName}</View>
                                    <View className='SelectAddress_select_noSelect'></View>
                                </View>
                            }
                            return <View onClick={() => {
                                setData(data.filter(o => {
                                    return o.id !== id
                                }))
                            }} className='SelectAddress_select_rightItem SelectAddress_select_rightItemCheck'>
                                <View>{majorName}</View>
                                <View className='SelectAddress_select_select'></View>
                            </View>
                        })}

                    </>

                })}
            </View>
        </View>
        {data.length > 0 && <View className='SelectAddress_selectTag'>
            {data.map(val => {
                return <View className='SelectAddress_tag'>
                    {val.majorName}
                    <View onClick={() => {
                        setData(data.filter(o => { return o.id !== val.id }))
                    }} className='SelectAddress_tag_close'></View>
                </View>
            })}
        </View>}
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData([])
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        majorIds: data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const MajorData = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [], } = props
    const { majorTypeId = {}, } = defaultData
    const [list, setList] = useState([])
    const [activeList, setActiveList] = useState([])
    const [active, setActive] = useState({})
    useEffect(() => {
        const majorTypeList = selectList.reduce((val, item) => {
            if (item.code === 'majorType') {
                return item.majorTypeList
            }
            else {
                return val
            }
        }, [])
        setList(majorTypeList)
    }, [selectList])
    useEffect(() => {
        if (visible) {
            const { childrenList = [], fatherData = {} } = majorTypeId
            setActive(fatherData)
            setActiveList(childrenList)
        } else {
            setActive({})
            setActiveList([])
        }

    }, [visible])

    const { id, selectType = 'children', } = majorTypeId
    const isSelect = (val) => {
        if (selectType === 'children') {
            return val === id
        } else {
            return false
        }
    }
    return <View className='SelectAddress_box'>
        <View className='SelectAddress_body_info'>
            <View className='SelectAddress_body_left'>
                <View onClick={() => {
                    setActive(id)
                    onChange({
                        majorTypeId: {}
                    })
                    onClose()
                }} className={(!id && !active.id) ? 'SelectAddress_select_item SelectAddress_select_itemCheck' : 'SelectAddress_select_item'}>全部</View>
                {list.map(val => {
                    const { id, majorTypeName, majorTypeList = [] } = val
                    return <View onClick={() => {
                        setActive(val)
                        setActiveList(majorTypeList)
                    }} className={id === active.id ? 'SelectAddress_select_item SelectAddress_select_itemCheck' : 'SelectAddress_select_item'}>{majorTypeName}</View>
                })}

            </View>
            <View className='SelectAddress_body_right'>
                {active.id && <View onClick={() => {
                    onChange({
                        majorTypeId: { codeName: active.majorTypeName, id: active.id, selectType: 'father', childrenList: activeList, fatherData: active }
                    })
                    onClose()
                }} className={id === active.id ? 'SelectAddress_Sort_List SelectAddress_Sort_List_itemCheck' : 'SelectAddress_Sort_List'}>
                    <View>
                        <View className={'SelectAddress_Sort_List_body'}>
                            不限
                        </View>
                    </View>

                </View>}
                {activeList.map(c => {
                    return <>
                        <View onClick={() => {
                            onChange({
                                majorTypeId: { codeName: c.majorTypeName, id: c.id, selectType: 'children', childrenList: activeList, fatherData: active }
                            })
                            onClose()
                        }} className={isSelect(c.id) ? 'SelectAddress_Sort_List SelectAddress_Sort_List_itemCheck' : 'SelectAddress_Sort_List'}>
                            <View>
                                <View className={'SelectAddress_Sort_List_body '}>
                                    <View className='SelectAddress_Sort_List_itemcontent font_hide'>{c.majorTypeName}</View>
                                    <View className='SelectAddress_Sort_label'>（{active.parentMajorTypeName}）</View>
                                </View>
                            </View>

                        </View>
                    </>

                })}
            </View>
        </View>
    </View>
}
const EnrollmentTypeData = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState({})
    const [list, setList] = useState([])
    useEffect(() => {
        const filterObj = selectList.reduce((val, item) => {
            if (item.code === 'enrollmentType') {
                return item.enrollmentTypeList
            }
            else {
                return val
            }
        }, [])
        setList(filterObj)
    }, [selectList])
    useEffect(() => {
        if (visible) {
            setData(defaultData)
        }
        else {
            setData({})
        }
    }, [visible])
    const {
        enrollmentType
    } = data

    return <View className='FilterData_box'>
        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                <View className='FilterData_content_item'>
                    {list.map(val => {
                        const { name, value } = val
                        return <View onClick={() => {
                            if (value === enrollmentType) {
                                setData({
                                    ...data,
                                    enrollmentType: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    enrollmentType: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === enrollmentType ? 'FilterData_content_tagCheck' : ''}`}>{name}</View>
                    })}
                </View>
            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData({})
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        ...data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const ProvinceNotCity = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState({})
    const [RenderData, setRenderData] = useState({})
    useEffect(() => {
        const { schoolProvinceCode } = defaultData
        if (visible) {
            setData({ schoolProvinceCode })
        }
        else {
            setData({})
        }
    }, [visible])
    const {
        schoolProvinceCode = ''
    } = data
    return <View className='FilterData_box'>
        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                <View className='FilterData_content_title'>选择省份</View>
                <View className='FilterData_content_item'>
                    {City.map(val => {
                        const { label, value } = val
                        return <View onClick={() => {
                            if (value === schoolProvinceCode) {
                                setData({
                                    ...data,
                                    schoolProvinceCode: ''
                                })
                            }
                            else {
                                setData({
                                    ...data,
                                    schoolProvinceCode: value
                                })
                            }
                        }} className={`FilterData_content_tag ${value === schoolProvinceCode ? 'FilterData_content_tagCheck' : ''}`}>{label}</View>
                    })}
                </View>
            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData({
                        schoolProvinceCode: ''
                    })
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        ...data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const BatchLine = (props) => {
    const { selectList = [], onChange, onClose, defaultData = {} } = props
    const [list, setList] = useState([])
    const { batchLineId } = defaultData
    useEffect(() => {
        const batchLineList = selectList.reduce((val, item) => {
            if (item.code === 'batchLine') {
                return item.list
            }
            else {
                return val
            }
        }, [])
        setList(batchLineList)
    }, [selectList])
    console.log(defaultData, '123123')
    return <View className='Sort_Box'>
        {list.map(val => {
            return <View onClick={() => {
                onChange({
                    batchLineId: val.id
                })
                onClose()
            }} className={`Sort_List ${batchLineId === val.id ? 'Sort_List_itemCheck' : ''}}`}>
                <View>
                    {val.batchLineCompleteName}
                </View>
            </View>
        })}
    </View>
}
const MajorLevelData = (props) => {
    const { selectList = [], onChange, onClose, defaultData = {} } = props
    const [list, setList] = useState([])
    const { majorLevel } = defaultData
    useEffect(() => {
        const batchLineList = selectList.reduce((val, item) => {
            if (item.code === 'majorLevel') {
                return item.majorLevelList
            }
            else {
                return val
            }
        }, [])
        setList(batchLineList)
    }, [selectList])
    console.log(defaultData, '123123')
    return <View className='Sort_Box'>
        {list.map(val => {
            return <View onClick={() => {
                onChange({
                    majorLevel: val.value
                })
                onClose()
            }} className={`Sort_List ${majorLevel === val.value ? 'Sort_List_itemCheck' : ''}}`}>
                <View>
                    {val.name}
                </View>
            </View>
        })}
    </View>
}
const SatisfyYear = (props) => {
    const { visible, onChange, onClose, defaultData = {}, selectList = [] } = props
    const [data, setData] = useState([])
    const [RenderList, setRenderList] = useState([])
    useEffect(() => {
        const filterObj = selectList.reduce((val, item) => {
            if (item.code === 'satisfyYear') {
                return item.enrollYearList
            }
            else {
                return val
            }
        }, [])
        setRenderList(filterObj)
    }, [selectList])
    useEffect(() => {
        const { years = [] } = defaultData
        if (visible) {
            setData(years)
        }
        else {
            setData([])
        }
    }, [visible])
    const filterIncludes = (id) => {
        return data.includes(id)
    }
    const SubjectHandle = (value) => {

        if (filterIncludes(value)) {
            setData(data.filter(val => {
                return val !== value
            }))
        }
        else {
            setData([...data, value])
        }
    }
    return <View className='FilterData_box'>
        <View className='FilterData_body_info'>
            <View className='FilterData_content'>
                <View className='FilterData_content_item'>
                    {RenderList.map(val => {
                        const { yearName } = val
                        return <View onClick={() => {
                            SubjectHandle(yearName)
                        }} className={`FilterData_content_tag ${filterIncludes(yearName) ? 'FilterData_content_tagCheck' : ''}`}>{yearName}</View>
                    })}
                </View>
            </View>
        </View>
        <View className='SelectAddress_btn_box'>
            <View className='SelectAddress_btn_content'>
                <View onClick={() => {
                    setData([])
                }} className='SelectAddress_btn_style SelectAddress_btn_color1'>
                    重置
                </View>
                <View onClick={() => {
                    onChange({
                        years: data
                    })
                    onClose()
                }} className='SelectAddress_btn_style SelectAddress_btn_color2'>
                    确定
                </View>
            </View>
        </View>
    </View>
}
const filterShowName = (val, params) => {
    const { code, name } = val

    if (code === 'province') {
        const { cityCodes = [] } = params
        if (cityCodes.length > 0) {
            return cityCodes.map(val => { return val.label }).toString()
        }

    }
    else if (code === 'sort') {
        // const { sortList = [] } = val
        // const { sortField, sortValue } = params
        // return sortList.reduce((val, index) => { }, '')
    }
    else if (code === 'filter') {

    }
    else if (code === 'major') {

    }
    else if (code === 'enrollmentType') {

    }
    else if (code === 'schoolLevel') {
        const { schoolLevelList = [] } = val
        const { schoolLevel } = params
        return schoolLevelList.reduce((val, index) => {
            if (index.value === schoolLevel) {
                return index.name
            }
            return val
        }, name)
    }
    else if (code === 'majorLevel') {
        const { majorLevelList = [] } = val
        const { majorLevel } = params
        return majorLevelList.reduce((val, index) => {
            if (index.value === majorLevel) {
                return index.name
            }
            return val
        }, name)
    }
    else if (code === 'enrollYear') {
        const { enrollYearList = [] } = val
        const { year } = params
        return enrollYearList.reduce((val, index) => {
            if (index.yearName === year) {
                return index.yearName
            }
            return val
        }, name)

    } else if (code === 'batchLine') {

    }
    else if (code === 'planSchoolFilter') {


    }
    else if (code === 'majorType') {
        const { majorTypeId = {} } = params
        if (majorTypeId.codeName) {
            return majorTypeId.codeName
        }
    }
    else if (code === 'provinceNotCity') {
        const { schoolProvinceCode = '' } = params
        return City.reduce((val, index) => {
            if (index.value === schoolProvinceCode) {
                return index.label
            }
            return val
        }, name)
    }
    else if (code === 'satisfyYear') {
        const { years = [] } = params
        const { enrollYearList = [] } = val
        const newName = enrollYearList.reduce((val, index) => {
            if (years.includes(index.yearName)) {
                return [...val, index.yearName]
            }
            return val
        }, [])
        if (newName.length) {
            return newName.toString()
        }
    }

    return name
}
const DropdownMenu = (props) => {
    const { selectList = [], params = {}, onChange } = props
    const [visible, setVisible] = useState(false)
    const [showKey, setShowKey] = useState(null)
    const [top, setTop] = useState(0)
    console.log(top, '--------------')
    useEffect(() => {
        setTimeout(() => {
            try {
                getDom('.DropdownMenu_getTop', (e) => {
                    setTop(e[0].top)
                })
            } catch (e) {
                setTop(84)
            }

        }, 1000)

    }, [selectList.length])
    const onVisible = (key) => {
        if (showKey === key) {
            setVisible(false)
            setShowKey(null)
        } else {
            setShowKey(key)
            setVisible(true)
        }
    }
    const RenderComponents = () => {
        if (showKey === 'province') {
            return <SelectAddress defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible}></SelectAddress>
        }
        else if (showKey === 'sort') {
            return <Sort defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></Sort>
        }
        else if (showKey === 'planMajorFilter') {
            return <PlanMajorFilter defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></PlanMajorFilter>
        }
        else if (showKey === 'filter' || showKey === 'planMajorFilter') {
            return <FilterData defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></FilterData>
        }
        else if (showKey === 'major') {
            return <MajorType defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></MajorType>
        }
        else if (showKey === 'enrollmentType') {
            return <EnrollmentTypeData defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></EnrollmentTypeData>
        } else if (showKey === 'provinceNotCity') {
            return <ProvinceNotCity defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></ProvinceNotCity>
        }
        else if (showKey === 'schoolLevel') {
            return <SchoolLevel defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></SchoolLevel>
        } else if (showKey === 'enrollYear') {
            return <EnrollYear defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></EnrollYear>
        } else if (showKey === 'batchLine') {
            return <BatchLine defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></BatchLine>
        }
        else if (showKey === 'planSchoolFilter') {
            return <PlanSchoolFilterData defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></PlanSchoolFilterData>
        } else if (showKey === 'majorLevel') {
            return <MajorLevelData defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></MajorLevelData>
        } else if (showKey === 'majorType') {
            return <MajorData defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></MajorData>
        }
        else if (showKey === 'satisfyYear') {
            return <SatisfyYear defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></SatisfyYear>
        }
        else if (showKey === 'volunteerFilter')
            return <VolunteerFilter defaultData={params} onClose={() => { setVisible(false) }} onChange={onChange} visible={visible} selectList={selectList}></VolunteerFilter>
    }

    return <View className='DropdownMenu_box'>
        <View className='DropdownMenu_search_select_tool'>
            {selectList.map(val => {
                const { name, code, showCode = true } = val
                return <View onClick={(e) => {
                    e.stopPropagation()
                    if (showCode) {
                        onVisible(code)
                    }

                }} className={`DropdownMenu_search_selectItem ${showKey === code && visible ? 'DropdownMenu_search_selectActive' : ''}`}>
                    <View className='DropdownMenu_text font_hide'>
                        {filterShowName(val, params)}
                    </View>
                    {showCode && <View className={showKey === code && visible ? 'DropdownMenu_search_selectItemIcon2' : 'DropdownMenu_search_selectItemIcon'}></View>}
                </View>
            })}
        </View>
        <View className='DropdownMenu_getTop'></View>
        <View className='DropdownMenu_top'>
            <View style={{ top: top }} className={`selectWrap ${visible ? 'slidown' : 'slidup'}`}>
                {RenderComponents()}
            </View>

            <View catchMove style={{ top: top }} className={visible ? 'shadow' : ''} onClick={() => {
                setVisible(false)
                setShowKey(false)
            }} />

        </View>
    </View>
}
export default DropdownMenu